<template>
    <div class="user-form">
        <h3>信息填写表单</h3>
        <div class="user-form-item" :class="{ 'user-form-item-error': formRule.userName.status === EStatus.ERROR }">
            <div class="label">姓名</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.userName"
                    @change="setFormItemRule('userName', checkoutFormItem('userName'))" />
                <span>{{ formRule.userName.msg }}</span>
            </div>
        </div>
        <div class="user-form-item" :class="{ 'user-form-item-error': formRule.school.status === EStatus.ERROR }">
            <div class="label">学校</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.school"
                    @change="setFormItemRule('school', checkoutFormItem('school'))" />
                <span>{{ formRule.school.msg }}</span>
            </div>
        </div>
        <div class="user-form-item" :class="{ 'user-form-item-error': formRule.baseInfo.address.status === EStatus.ERROR }">
            <div class="label">地址</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.baseInfo.address"
                    @change="setFormItemRule('address', checkoutFormItem('address'))" />
                <span>{{ formRule.baseInfo.address.msg }}</span>
            </div>
        </div>
        <div class="user-form-item" :class="{ 'user-form-item-error': formRule.baseInfo.tel.status === EStatus.ERROR }">
            <div class="label">电话</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.baseInfo.tel"
                    @change="setFormItemRule('tel', checkoutFormItem('tel'))" />
                <span>{{ formRule.baseInfo.tel.msg }}</span>
            </div>
        </div>
        <div class="user-form-item"
            :class="{ 'user-form-item-error': formRule.baseInfo.email.status === EStatus.ERROR }">
            <div class="label">邮箱</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.baseInfo.email"
                    @change="setFormItemRule('email', checkoutFormItem('email'))" />
                <span>{{ formRule.baseInfo.email.msg }}</span>
            </div>
        </div>
        <div class="user-form-item"
            :class="{ 'user-form-item-error': formRule.baseInfo.birthday.status === EStatus.ERROR }">
            <div class="label">生日</div>
            <div class="value">
                <input type="text" placeholder="请输入" v-model="userInfo.baseInfo.birthday"
                    @change="setFormItemRule('birthday', checkoutFormItem('birthday'))" />
                <span>{{ formRule.baseInfo.birthday.msg }}</span>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
@import "./index.less";
</style>


<script lang="ts" setup>
import { ref, watch } from 'vue';
import { IUserInfo, innterAnotherType } from "@/types"


enum EStatus {
    ERROR = "ERROR",
    SUCCESS = "SUCCESS"
}

interface IStatus {
    status: EStatus;
    msg: string;
}

const emit = defineEmits<{
    change: [val: IUserInfo]
}>()


const userInfo = ref<IUserInfo>({
    userName: "",
    school: "",
    baseInfo: {
        address: "",
        tel: "",
        email: "",
        birthday: "",
    },
    education: []
})


const formRule = ref<innterAnotherType<Omit<IUserInfo, "education">, IStatus>>({
    userName: { status: EStatus.SUCCESS, msg: "" },
    school: { status: EStatus.SUCCESS, msg: "" },
    baseInfo: {
        address: { status: EStatus.SUCCESS, msg: "" },
        tel: { status: EStatus.SUCCESS, msg: "" },
        email: { status: EStatus.SUCCESS, msg: "" },
        birthday: { status: EStatus.SUCCESS, msg: "" }
    },
})




watch(userInfo.value, (newInfo: IUserInfo) => {
    emit("change", newInfo)
})


const checkoutFormItem = (key: keyof IUserInfo | keyof IUserInfo["baseInfo"]): IStatus => {
    if (key === 'userName' && !userInfo.value[key].trim()) return {
        status: EStatus.ERROR,
        msg: "姓名输入内容有误"
    }
    else if (key === "school" && !userInfo.value[key].trim()) return {
        status: EStatus.ERROR,
        msg: "学校输入内容有误"
    }
    else if (key === "address" && !userInfo.value.baseInfo[key].trim()) return {
        status: EStatus.ERROR,
        msg: "地址输入内容有误"
    }
    else if (key === "tel" && !(/^1[1-9]{10}$/.test(userInfo.value.baseInfo[key]))) return {
        status: EStatus.ERROR,
        msg: "电话输入内容有误"
    }
    else if (key === "email" && !(/\.(com|cn)$/.test(userInfo.value.baseInfo[key]) && userInfo.value.baseInfo[key].includes("@"))) return {
        status: EStatus.ERROR,
        msg: "邮箱输入内容有误"
    }
    else if (key === "birthday" && !(/^[1-9]{4}\-[0-1]{0,1}[0-9]{1}\-[0-3]{0,1}[0-9]{1}/.test(userInfo.value.baseInfo[key]))) return {
        status: EStatus.ERROR,
        msg: "生日输入内容有误"
    }
    return { status: EStatus.SUCCESS, msg: "" }
}

const setFormItemRule = (key: keyof Omit<IUserInfo, "education"> | keyof IUserInfo["baseInfo"], val: IStatus) => {
    if (key === 'userName' || key === 'school') formRule.value[key] = val;
    else Reflect.set(formRule.value.baseInfo, key, val)
}

</script>